<template>
  <div class="tab">
    <tabbar @tabbar-text-active-color="'blue'">
        <tabbar-item show-dot :selected="$route.path==='/'" @click.native="jumpTo('home')">
          <span slot="icon" class="iconfont icon-home"></span>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :selected="$route.path==='/member'">
          <span slot="icon" class="iconfont icon-weibiaoti2fuzhi12"></span>
          <span slot="label">会员</span>
        </tabbar-item>
        <tabbar-item link="/" badge="2" :selected="$route.path==='/cart'" @click.native="jumpTo('cart')">
          <span slot="icon" class="iconfont icon-gouwuche"></span>
          <span slot="label">购物车</span>
        </tabbar-item>
        <tabbar-item>
          <span slot="icon" class="iconfont icon-xiazai17"></span>
          <span slot="label">搜索</span>
        </tabbar-item>
      </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
    }
  },
  methods: {
    jumpTo (pathName) {
      this.$router.push({ name: pathName })
      // console.log(this.$route)
    }
  }

}
</script>

<style lang="less" scoped>
.active {
  color: #26a2ff;
}
</style>
